<template>
  <div class="teaching-management">
    <h3>授课信息管理</h3>
    <div class="input_box">
      <span class="querySpans">查询条件:</span>
      <el-input v-model="selectData.teacherName" maxlength="50" size="small" placeholder="输入教师姓名"></el-input>
      <el-button class="selectBtn" size="small" @click="getList(1,page_option.page_size)">查询</el-button>
      <el-button size="small" icon="el-icon-circle-plus" class="addAll" style="float: right;margin-right:30px"
                 @click="add">添加授课
      </el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%;text-align:center" size="small"
                @cell-click="cellClick">
        <el-table-column prop="id" label="ID" min-width="70" sortable fixed></el-table-column>
        <el-table-column prop="subject" label="科目ID" min-width="170"></el-table-column>
        <el-table-column prop="className" label="班级名称" min-width="170"></el-table-column>
        <el-table-column prop="teachUser" label="教师ID" min-width="170"></el-table-column>
        <el-table-column prop="teachUserName" label="教师姓名" min-width="170"></el-table-column>
        <el-table-column prop="class" label="班级ID" min-width="170"></el-table-column>
        <el-table-column prop="subjectName" label="科目名称" min-width="170"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="170">
          <template v-slot="{row}">
            <span>{{ row.createTime | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="160">
          <template v-slot="scope">
            <el-button @click="handleEdit(scope.row)" style="background-color:#008a96;color:#fff" size="mini">编辑
            </el-button>
            <el-button @click="handleDelete(scope.row)" style="background-color:#ea7c5a;color:#fff" size="mini">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page_option.current_page"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="page_option.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_option.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.getList(1, 15);
  },
  data() {
    return {
      selectData: {
        teacherName: "" //授课老师
      },
      tableData: [],
      page_option: {
        current_page: 1,
        page_size: 15,
        total: 0
      },
    };
  },
  methods: {
    //编辑老师简介
    handleEdit(row) {
      this.$router.push({
        path: "/education/teachingManagement/edit",
        query: {
          id:row.id,
          class:row.class,
          subject:row.subject,
          teachUser:row.teachUser,
        }
      });
    },
    //条件查询
    select() {
      this.getList(
        1,
        this.page_option.page_size
      );
      this.page_option.current_page = 1;

    },
    getList(current, size) {
      let params = {
        "teacherName": this.selectData.teacherName,
        "pageNum": current,
        "pageSize": size,
      };
      this.$api.education.teachCourseList(params)
        .then((res) => {
          this.tableData = res.data.list;
          this.page_option.total = res.data.total;
        });

    },
    handleSizeChange(size) {
      this.page_option.page_size = size;
      this.page_option.current_page = 1;
      this.getList(
        1,
        this.page_option.page_size
      );
    },
    handleCurrentChange(current) {
      this.page_option.current_page = current;
      this.getList(
        this.page_option.current_page,
        this.page_option.page_size
      );
    },
    //编辑
    cellClick(row, column, cell, event) {
      console.log(row, column);
      if (["name"].indexOf(column.property) > -1) {
        this.$prompt("修改ID为" + row.id + "的" + column.label, "编辑", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^[\s\S]{1,50}$/,
          inputValue: row[column.property],
          inputErrorMessage: "输入内容不能为空并且小于50个字符",
          inputValidator: (v) => {
            if (v.replace(/(^\s+)|(\s+$)/g, "") === "") {
              return "内容不能为空";
            } else {
              return true;
            }
          }
        }).then(({ value }) => {
          let option = this.option();
          option.id = row.id;
          option[column.property] = value;
          console.log(option);

        }).catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: "取消修改"
          });
        });
      }
    },
    //删除
    handleDelete(row) {
      this.$confirm("是否确认删除该老师?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {

      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },

    //添加老师
    add() {
      this.$router.push({ path: "/education/teachingManagement/add" });
    },

    option() {
      return {
        id: "", name: ""
      };
    }
  }
};
</script>
<style scoped>
@import url('./list.css');
</style>
